<script setup lang="ts">
	import { computed, ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { useLocation } from '@/hooks/web/useLocation'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { storeList } from '@/package_saleman/api/Home'
	import { useUserStore } from '@/stores/user'
	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const { userInfo } = useUserStore()
	const { getLocation } = useLocation()


	const useTabs = () => {
		const currentIndex = ref(0)
		const tabsColumns = computed(() => {
			return [
				{
					name: '所有客户',
					badge: { value: taskInfo.value.undone },
					id: 1
				},
				{
					name: '应收门店',
					badge: { value: taskInfo.value.done },
					id: 2
				}
			]
		})

		const taskInfo = ref({
			undone: 0,
			done: 0
		})

		const currentTabsItem = computed(() => {
			return unref(tabsColumns)[unref(currentIndex)]
		})

		return {
			currentIndex,
			tabsColumns,
			currentTabsItem,
			taskInfo
		}
	}
	const { tabsColumns, currentIndex, taskInfo, currentTabsItem } = useTabs()

	const paging = ref()
	const useCURD = () => {
		const dataList = ref([])
		const query = ref({
			name: '',
			lon: '', // 经度
			lat: '', // 纬度
		})

		const getList = async (page : number, limit : number) => {
			try {
				const locationData = await getLocation();
				query.value.lat = locationData.latitude || ''
				query.value.lon = locationData.longitude || ''
				const params = { page, limit, type: unref(currentTabsItem).id, ...query.value }
				try {
					const res = await storeList(params)
					paging.value?.complete([...res.data.data])
				} catch (err) {
					paging.value?.complete(false)
				}
			} catch (err) {
				showNotify({
					type: 'error',
					message: '获取位置信息失败，请检查定位权限'
				})
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,
			query
		}
	}
	const { dataList, getList, searchAction, query } = useCURD()
	// 导航
	const openLocation = (item) => {
		uni.openLocation({
			latitude: Number(item.lat),
			longitude: Number(item.lon),
			name: item.address
		})
	}
	// 距离格式化
	const formatDistance = (distance : number) => {
		if (distance < 1000) {
			return `${distance.toFixed(2)} m`;
		} else {
			return `${(distance / 1000).toFixed(2)} km`;
		}
	};
	// 门店详情
	const toStoreDetail = (item) => {
		route({
			url: '/package_tools/pages/Account/detail',
			params: {
				store_id: item.id,
				name: item.name,
				receive_money: item.receive_money,
				balance: item.balance,
				should_payment: item.should_payment
			}
		})
	}
</script>

<template>
	<view class="content">
		<view class="user_info_wrap">
			<view class="search-wrap">
				<up-search v-model="query.name" @search="searchAction" @custom="searchAction" @clear="searchAction"
					showAction actionText="搜索" animation shape="square" bgColor="rgba(243, 242, 245, 1)"></up-search>
			</view>
			<view class="user-info">
				<view class="avatar-wrap">
					<up-tabs v-model:current="currentIndex" @change="searchAction" :list="tabsColumns"
						:activeStyle="{ color: 'rgba(54, 116, 242, 1)' }"
						:itemStyle="{ height: '104rpx', fontSize: '28rpx' }" lineWidth="104rpx"
						lineColor=" rgba(54, 116, 242, 1)" :scrollable="false">
					</up-tabs>
				</view>
			</view>
		</view>
		<view class="main">
			<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 249rpx)">
				<view class="main-box" v-for="(item,index) in dataList" :key="index">
					<view class="main-header">
						<view class="header-name">{{item.name}}
						</view>
						<view class="header-right" @click="openLocation(item)">
							<view class="right-img">
								<image style="width: 34rpx;height: 34rpx;" src="/static/icon/icon1.png">
								</image>
							</view>
							<text class="right-name">导航去此处</text>
						</view>
					</view>
					<view @click="toStoreDetail(item)">
						<view class="mian-address">
							<view class="address-name">{{item.address}}</view>
							<view class="distance-name">{{formatDistance(Number(item.distance))}}</view>
						</view>
						<view class="line"></view>
						<view class="main-jl">应收账期：<text
								style="color: rgba(2, 14, 36, 1);">{{item.should_payment}}</text>
						</view>
						<view class="main-jl">总账期款：<text
								style="color: rgba(2, 14, 36, 1);">{{item.total_payment}}</text>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
	}

	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		height: 249rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx 0rpx;
		box-sizing: border-box;

		.search-wrap {
			display: flex;
			align-items: center;
			width: 100%;
			height: 64rpx;
			border-radius: 20rpx;
			padding: 10rpx;
			background: rgba(243, 242, 245, 1);
		}
	}

	.main {
		width: 100%;
		height: calc(100vh - 369rpx);
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容iOS 11.2及以上 */
		.main-box {
			width: 702rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.main-header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}

				.header-right {
					display: flex;

					.right-img {
						width: 34rpx;
						height: 34rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}

					.right-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(55, 131, 252, 1);
					}
				}
			}

			.mian-address {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.address-name {
					width: 80%;
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
				}

				.distance-name {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(156, 154, 161, 1);
				}
			}

			.line {
				width: 572rpx;
				height: 4rpx;
				margin: 20rpx 0rpx;
				background: linear-gradient(90deg, rgba(55, 131, 252, 1) 0%, rgba(255, 255, 255, 0) 100%);
			}

			.main-jl {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(101, 103, 105, 1);
				margin-bottom: 20rpx;
			}

		}
	}
</style>